<template>


  <headerpage></headerpage>
  <div class="main">
      <div class="row" style="width:100%;margin:0 auto">
        <div class="col-md-9" id="home-left">
          <div class="row">
            <div class="col-md-3"><img src="../assets/img/logo.png"></div>
            <div class="col-md-3"><img src="../assets/img/logo.png"></div>
            <div class="col-md-3"><img src="../assets/img/logo.png"></div>
            <div class="col-md-3"><img src="../assets/img/logo.png"></div>
          </div>
        </div><!--home-left-->
        <div class="col-md-3" id="home-right">
          右边
        </div><!--hoem-right-->
      </div>
  </div>
 <div class="tips-page">
   IT资讯-一家有温度和情怀的网站
 </div>
  <div class="list">
    <table class="table">
      <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>电话</th>
        <th>电话</th>
        <th>电话</th>
        <th>电话</th>
      </tr>
      </thead>
      <tbody>
      <template v-for="item in datalist">
        <tr>
          <td>{{ item.id}}</td>
          <td>{{ item.cname }}</td>
          <td>{{ item.tel }}</td>
          <td>{{ item.tel }}</td>
          <td>{{ item.tel }}</td>
          <td>{{ item.tel }}</td>
        </tr>
      </template>
      </tbody>
    </table>
  </div>

  <div class="buttonPage"><button type="button" class="btn btn-secondary" v-on:click="getData">加载数据</button></div>
  <footerpage></footerpage>
</template>
<style>
    body{
      margin: 0 auto;
    }
</style>
<script>
  import QK from '../QK'
  import headerpage from './common/header-page'
  import footerpage from './common/footer'
    export default{
        //获取数据
        data(){
            return{
                datalist:[]
            }
        },
        //组件
        components: {
          headerpage,
          footerpage
        },
        //加载数据
        ready:function(){
          this.getData();
        },
        methods:{
        getData:function(){
          var that = this
              that.$http.get('http://192.168.1.133:3000/data',true).then(function(res){
                var data = res.body
                 console.dir(data)
                if(data.code==0){
                    that.datalist = data.data;
                     console.dir("数据正常")
                  }
              })
       }
    }
 }
</script>
<style>
  .btn-secondary{
    height:30px;
		width:100px;
		background-color: #1ab394;
  }
  #home-left{
    margin-top: 2px;
    background-color: #f2dede;
  }
  #home-right{
    margin-top: 2px;
    background-color:#9acfea;
    height:200px;
  }
  .main{
    width:98%;
    margin:0 auto;
  }
  .buttonPage{
    margin:0 auto;
  }
  .tips-page{
    font-size: 36px;
    vertical-align: middle;
    text-align: center;
    height:50px;
    width:98%;
    margin:0 auto;
    background-color: #1ab394;
    margin-top:20px;
  }
  .list{
    width:98%;
    margin:0 auto;
    margin-top:20px;
  }
</style>
